<template>
  <div class="result-body">
    <div class="mocks-detail-bar">
      <ul class="bar-list">
        <li class="list-item" v-for="(value,index) in resultList"
            @click.prevent="showQuestion(index)"
            :class="activeIndex == index ? 'active': ''">
          <span class="item-num">Q {{(index < 10 ? '0' + (index + 1) : (index + 1))}}</span>
          <span class="item-flag" :class="(value == 1 ? 'correct': 'error')"></span>
        </li>
      </ul>
    </div>

    <div class="mocks-detail-container">
      <div class="d-read-l" v-for="(item, index) in sectionList" :class="activeIndex == index ? 'active' : ''">
        <div class="q-item">
          <span class="q-item-label">您的答案：</span>
          <p class="q-item-text">{{ getUserAnswer(index).flag }} ) {{ getUserAnswer(index).content }}</p>
        </div>
        <div class="q-item">
          <span class="q-item-label">正确答案：</span>
          <p class="q-item-text color-red">{{ getRightAnswer(index).flag }} ) {{ getRightAnswer(index).content }}</p>
        </div>
      </div>
      <div class="d-read-r">
        <h3 class="dr-title">{{partInfo.title}}</h3>
        <div class="dr-con" v-html="articleText"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "MocksReadDetail",
    props: {
      partInfo: Object
    },
    data() {
      return {
        activeIndex: 0,
        sectionList: []
      }
    },
    computed: {
      resultList () {
        if (this.partInfo.question_list && this.partInfo.question_list.length) {
          let result = this.partInfo.question_list[0].result;
          return result;
        }
        return [];
      },
      articleText () {
        let str = this.partInfo.content;
        return (str && typeof str === 'string') ? str.replace(/\n/g, '<br />').replace(/\t/g, '&nbsp;') : '';
      }
    },
    mounted () {
      if (this.partInfo.question_list) {
        let questionNum = this.partInfo.question_list[0].question_num;
        this.sectionList = new Array(questionNum);
      }
    },
    methods: {
      showQuestion (index) {
        this.activeIndex = index;
      },
      getUserAnswer (index) {
        let answerId = this.partInfo.question_list[0].user_answer[index];
        let answerList = this.partInfo.question_list[0].answer_list;
        for (let i = 0; i < answerList.length; i++) {
          if (answerId == answerList[i].id) {
            return answerList[i];
          }
        }
        return null;
      },
      getRightAnswer (index) {
        let answerId = this.partInfo.question_list[0].right_answer[index];
        let answerList = this.partInfo.question_list[0].answer_list;
        for (let i = 0; i < answerList.length; i++) {
          if (answerId == answerList[i].id) {
            return answerList[i];
          }
        }
        return null;
      }
    }
  }
</script>
